<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>后台信息管理</title>
	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
	<body class="easyui-layout">
		<div data-options="region:'north'" style="height:70px; text-align: center">
           <h1>EasySpring后台管理</h1>
       </div>
       <div data-options="region:'south',split:true" style="height:50px;"></div>
       <div data-options="region:'west',split:true,title:'菜单栏',iconCls:'icon-ok'" style="width:250px;">
           <div class="easyui-accordion" data-options="fit:true,border:false">
               <!-- 这里由于只有一个，所以不设置title-->
             <div data-options="fit:true,collapsible:false" style="padding:10px;"><!-- 每一个div都是accordion中依赖的panel -->
			 <ul class="easyui-tree" id="kingtree">
			  <li>
				<span>My Documents</span>
				<ul>
					<li data-options="state:'closed'">
						<span>Photos</span>
						<ul>
							<li id="5555">
								<span>Friend</span>
							</li>
							<li id="666">
								<span>Wife</span>
							</li>
							<li id="7777">
								<span>Company</span>
							</li>
						</ul>
					</li>
					<li>
						<span>Program Files</span>
						<ul>
							<li>Intel</li>
							<li>Java</li>
							<li>Microsoft Office</li>
							<li>Games</li>
						</ul>
					</li>
					<li>index.html</li>
					<li>about.html</li>
					<li>welcome.html</li>
				</ul>
			</li>
		</ul>
               </div>
           </div>
       </div>
       <div data-options="region:'center',iconCls:'icon-ok'">
           <div id="admin_tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
				<div title="About" style="padding:10px">
					<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
					<button type="button" onclick="dlgEmploye()">Click Me!</button>
					<ul>
						<li>easyui is a collection of user-interface plugin based on jQuery.</li>
						<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
						<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
						<li>complete framework for HTML5 web page.</li>
						<li>easyui save your time and scales while developing your products.</li>
						<li>easyui is very easy but powerful.</li>
					</ul>
				</div>
		   </div>
       </div>
	   <div id="emwindows"></div>
</body>
<script >
$(function(){
    $("ul.westBar li").on("click", function(){
        // 添加选中样式
        $("ul.westBar li").removeClass('active');
        $(this).addClass('active');

        var id = $(this).attr('id');
        if($(this).hasClass('zdialog')){ // 这里可以扩展对话框菜单
            $('#' + id + '-dialog').dialog('open');
            return;
        }
        var id = $(this).attr('id');
        var title = $(this).text();
        var iconCls = $(this).find("span").attr('class');
        var parent = $(this).parent().attr('id');
        addTabs(id, title, iconCls, parent);
    })
});
function dlgEmploye() {
    //$("#emwindows").empty();
    var $win;
    $win = $("#emwindows").window({
        width: 700,
        height: 500,
        modal: true,
        href: './a.html',
        title: 'Choice',
        collapsible: false,
        maximizable: true,
        minimizable: false
    });
    $win.window('open');
}
$('#kingtree').tree({
    onClick: function(node){
	    console.log(node);
		var title=node.text;
		addTabs(2, title, 1, 1);
    }
});
function addTabs(id, title, iconCls, parent){
    if($('#admin_tabs').tabs('exists',title)){ // 处理已打开过的tab
        $('#admin_tabs').tabs('select',title);
        return;
    }
    if(!iconCls){
        iconCls = 'icon-ok';
    }
    $('#admin_tabs').tabs('add',{
        title: title,
        href: "_content.html", // 这里用parent + id来定义url
        iconCls: iconCls,
        closable: true,
        onLoadError:function(data){
            // 这里对于非200状态码的都会加载不出来界面，而需要在这里手动处理
            var tab = $('#admin_tabs').tabs('getSelected');
            var body = tab.panel('body');
			console.log(data);
            if(data.status == 401){
                body.html(data.responseText)
            }else{
                body.html('<h1>加载出错</h1>');
            }
        }
    });
}
</script>
</html>